/**
 * 鼠标悬浮时，文字旋转一圈，增强动效
 * -------------------------
 */
.anim-rotate {
  display: inline-block;
}

.anim-rotate:hover {
  animation: rotate_frames 0.5s forwards;
}

.anim-rotate-inf {
  //display: inline-block; /* 确保图标可以应用 transform */
  animation: rotate_frames 1s linear infinite; /* 1秒完成一圈，线性动画，无限循环 */
}

@keyframes rotate_frames {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/**
 * 箭头动效
 * -------------------------
 * 点击的时候旋转 180 度，再点击逆时针旋转 180
 * 展开-收缩，时常用这个特效
 */
.rotate-text {
  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* 更有趣的弹性动画 */
  line-height: 1;
  cursor: pointer;
  user-select: none; /* 防止文字被选中 */
}

.rotate-text.rotated {
  transform: rotate(-180deg);
}

/**
 * 简单动画
 * -------------------------
 * 动画特效对布局影响较大，需要注意父级容器的属性设置
 */
$sea-anim-time: 0.3s;

.sea-transition {
  opacity: 1;
  transition: width $sea-anim-time ease, height $sea-anim-time ease, padding $sea-anim-time ease, transform $sea-anim-time ease, opacity $sea-anim-time ease;
}

/* 向上滑动 */
.sea-transition.fade-out {
  opacity: 0;
  height: 0;
  transform: scaleY(0);
}

/* 向上滑动 */
.sea-transition.slide-up {
  position: fixed;
  transform: translateY(-100%);
}

/* 向下滑动 */
.sea-transition.slide-down {
  position: fixed;
  transform: translateY(100%);
}

/* 向左滑动 */
.sea-transition.slide-left {
  position: fixed;
  transform: translateX(-100%);
}

/* 向右滑动 */
.sea-transition.slide-right {
  position: fixed;
  transform: translateX(100%);
}

/* 高度收缩 */
.sea-transition.shrink-height {
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  height: 0 !important;
  min-height: 0 !important;
}

/* 宽度收缩 */
.sea-transition.shrink-width {
  opacity: 0;
  padding-left: 0;
  padding-right: 0;
  width: 0 !important;
  min-width: 0 !important;
}

/**
 * fontawesome 属性微调
 */
.fa-lightbulb-o {
  font-size: 1.1rem;
}


//.sea-transition {
//  opacity: 1;
//  transition: width $sea-anim-time ease, height $sea-anim-time ease, padding $sea-anim-time ease, transform $sea-anim-time ease, opacity $sea-anim-time ease;
//}

/* 高度收缩 */
.sea-transition.shrink-height2 {
  opacity: 0.2;
  padding-top: 0;
  padding-bottom: 0;
  //height: 0 !important;
  //min-height: 0 !important;
}